<template>
    <div>
        <el-card>
            <el-card class="!border-none" shadow="never">
                <el-page-header content="知识产权" @back="$router.back()" />
            </el-card>
            <div style="margin-top: 30px; margin-left: 30px; margin-right: 30px">
                <el-row :gutter="50">
                    <el-col :span="12">
                        <router-link
                            :to="{
                                path: getRoutePath('patent:data')
                            }"
                        >
                            <div
                                class="grid-content"
                                v-perms="['patent:data']"
                                style="background-color: #58bade"
                            >
                                <div class="top">
                                    <div class="topcontent">
                                        <img src="../../../assets/logo/zhuanli.png" alt="" />
                                        <span style="font-size: 26px; margin-left: 10px">专利</span>
                                    </div>
                                    <div class="topcontent">
                                        <span style="margin-right: 10px">进入</span>
                                        <img src="../../../assets/logo/jinru32.png" alt="" />
                                    </div>
                                </div>
                                <div class="context">
                                    专利是受法律规范保护的发明创造，<br />
                                    它是指一项发明创造向国家审批机关提出专利申请，<br />
                                    经依法审查合格后向专利申请人授予的在<br />
                                    规定的时间内对该项发明创造享有的专有权,<br />
                                    应当具备三性：1.新颖性 2.创造性 3.实用性
                                </div>
                            </div>
                        </router-link>
                    </el-col>

                    <el-col :span="12">
                        <router-link
                            :to="{
                                path: getRoutePath('brand:data')
                            }"
                        >
                            <div
                                class="grid-content"
                                v-perms="['brand:data']"
                                style="background-color: #e0be35"
                            >
                                <div class="top">
                                    <div class="topcontent">
                                        <img src="../../../assets/logo/shangbiao.png" alt="" />
                                        <span style="font-size: 26px; margin-left: 10px">商标</span>
                                    </div>
                                    <div class="topcontent">
                                        <span style="margin-right: 10px">进入</span>
                                        <img src="../../../assets/logo/jinru32.png" alt="" />
                                    </div>
                                </div>
                                <div class="context">
                                    商标是将某商品或服务标明是某具体个人或企业<br />
                                    所生产或提供的商品或服务的显著标志<br />
                                </div>
                            </div>
                        </router-link>
                    </el-col>
                </el-row>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <router-link
                            :to="{
                                path: getRoutePath('copyright:data')
                            }"
                        >
                            <div
                                class="grid-content"
                                v-perms="['copyright:data']"
                                style="background-color: #94c638"
                            >
                                <div class="top">
                                    <div class="topcontent">
                                        <img src="../../../assets/logo/banquan.png" alt="" />
                                        <span style="font-size: 26px; margin-left: 10px">版权</span>
                                    </div>
                                    <div class="topcontent">
                                        <span style="margin-right: 10px">进入</span>
                                        <img src="../../../assets/logo/jinru32.png" alt="" />
                                    </div>
                                </div>
                                <div class="context">
                                    指作者及其他权利人对文学、艺术和科学作品<br />
                                    享有的人身权和财产权的总称，<br />
                                    分为著作人格权与著作财产权
                                </div>
                            </div>
                        </router-link>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="contractAddContract">
import { getRoutePath } from '@/router'

const proposalDate: any = reactive({
    menu: [
        {
            name: '专利'
        },
        {
            name: '商标'
        },
        {
            name: '版权'
        }
    ]
})
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 230px;
    color: white;
    padding: 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.context {
    margin-top: 20px;
}
.top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topcontent {
    display: flex;
    align-items: center;
}
</style>
